{include file="admin/common/header" /}
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="munu-table" lay-filter="munu-table"></table>
    </div>
</div>
<script type="text/html" id="add_toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md {php}if(!check_auth(__url('/app/huiblog/module/nav/nav_add'))){ echo 'layui-hide';} {/php}"
            data-open="/app/huiblog/module/nav/nav_add?group_id={$group_id}"
            data-title="添加导航" data-reload="2">
        <i class="layui-icon layui-icon-add-1"></i>
        新增导航
    </button>
</script>

<script type="text/html" id="optionTpl">
    <a class="layui-btn layui-btn-xs layui-btn-normal"
       data-open="/app/huiblog/module/nav/nav_add?id={{d.id}}&group_id={$group_id}"
       data-title="添加下级" data-reload="2">添加下级</a>
    <a class="layui-btn layui-btn-xs layui-btn-success"
       data-open="/app/huiblog/module/nav/nav_edit?id={{d.id}}&group_id={$group_id}"
       data-title="编辑" data-reload="2">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs"
       data-delete="/app/huiblog/module/nav/nav_delete?id={{d.id}}&group_id={$group_id}"
       data-title="确定要删除吗？" data-reload="2">删除</a>
</script>
{include file="admin/common/footer" /}
<script>
  layui.use(['table', 'jquery', 'treetable'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    var treetable = layui.treetable;

    var insTb = treetable.render({
      treeColIndex: 2,
      treeSpid: 0,
      homdPid: 99999999,
      treeIdName: 'id',
      treePidName: 'pid',
      elem: '#munu-table',
      id: 'testReload',
      toolbar: '#add_toolbar',
      defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
        title: '刷新'
      }, 'filter'],
      method: 'get',
      url: "/app/huiblog/module/nav/nav_index",
      where: {group_id: {$group_id}},
      page: false,
      cols: [[
        {type: 'numbers'},
        {field: 'id', width: 70, title: 'ID', align: 'center'},
        {field: 'title', minWidth: 150, title: '名称'},
        {field: 'src', title: '链接'},
        {
          field: 'target',
          width: 100,
          title: '新窗口打开',
          align: 'center',
          templet: function (d) {
            if (d.pid === 0) {
              return '<span class="layui-badge layui-bg-orange">否</span>';
            } else {
              return '<span class="layui-badge-rim">是</span>';
            }
          }
        },
        {
          field: 'status', title: '状态', width: 80, align: 'center', templet: function (d) {
            if (d.status === 1) {
              return '<span class="layui-badge layui-bg-blue">启用</span>';
            } else {
              return '<span class="layui-badge layui-bg-orange">禁用</span>';
            }
          }
        },
        {field: 'sort', width: 80, title: '排序', edit: 'text', align: 'center'},
        {
          width: 200,
          title: '操作',
          templet: '#optionTpl',
          align: 'center',
        }
      ]],
      done: function () {
        layer.closeAll('loading');
      }
    });
    /* 监听单元格编辑 */
    table.on('edit(munu-table)', function (obj) {
      var value = obj.value
        , data = obj.data
        , field = obj.field;
      $.post("/app/huiblog/module/nav/nav_sort", {
        id: data.id,
        val: value,
        field: field,
        group_id: {$group_id}
      }, function (res) {
        if (res.code === 200) {
          layer.msg(res.msg, {time: 1500, icon: 1}, function () {
            window.location.reload();
          });
        } else {
          layer.msg(res.msg, {time: 1500, icon: 2});
        }
      })
    });
    table.on('toolbar(munu-table)', function (obj) {
      if (obj.event === 'refresh') {
        window.location.reload();
      }
    });

  });
</script>
</body>
</html>
